<!-- 修改密码 -->
<template>
  <div class="dialog-component dialog-list-data-container">
    <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="closeDialog"
      width="450px"
      @open="clearValidate"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="旧密码" prop="oldPass">
          <el-input v-model="ruleForm.oldPass" clearable style="width: 90%;" type="password" placeholder="请输入旧密码" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input v-model="ruleForm.pass" clearable style="width: 90%;" type="password" placeholder="请输入新密码" show-password />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="ruleForm.checkPass" clearable style="width: 90%;" type="password" placeholder="请再次输入密码" show-password />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" class="sure-btn" size="mini" type="primary" @click="handleSave">修改</el-button>
        <el-button class="cancel-btn" size="mini" @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updatePass } from '@/api/system/users'

export default {
  name: 'ChangePassword',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validateOldPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      saveLoading: false,
      ruleForm: {
        oldPass: '', // 短信验证码
        pass: '', // 密码
        checkPass: '' // 第二次输入的密码
      },
      rules: {
        oldPass: [{ validator: validateOldPass, trigger: 'blur' }],
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  methods: {
    clearValidate() {
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
      this.saveLoading = false
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    loginOut() {
      this.$emit('loginOut')
    },
    // 提交表单
    handleSave() {
      if (!this.saveLoading) {
        this.saveLoading = true
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            const data = {
              newPass: this.ruleForm.pass,
              oldPass: this.ruleForm.oldPass
            }
            updatePass(data).then(result => {
              this.$message({
                message: '密码修改成功',
                type: 'success'
              })
              this.closeDialog()
              this.loginOut()
            }).catch(() => {
              this.saveLoading = false
            })
          } else {
            this.saveLoading = false
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .step{
    text-align: center;
  }
</style>

<style lang="scss">
</style>
